<template>
    <div id="app">
        <title>通讯服务</title>
        <div>
            <van-row style="margin-top: 40px"></van-row>
            <van-contact-card @click="show = true"/>
            <br>
            <!-- 分类选择-->
            <van-row>
                <van-col span="20" :offset="1">
                    <van-field type="text" label="类别: " @click="typelb" v-model="flValue"  readonly/>
                </van-col>
            </van-row>
            <hr>
            <van-row>
                <van-col span="20" :offset="1">
                    <van-field
                            v-model="tablePage.soso"
                            name="联系人"
                            label="搜索："
                            placeholder="联系人/公司/电话"
                            @input="input"
                    />
                </van-col>
            </van-row>
            <hr>
            <!--    列表显示-->
            <br>
            <van-row>
                <van-col span="4" :offset="1">联系人</van-col>
                <van-col span="8" :offset="2">电话</van-col>
                <van-col span="3">详情</van-col>
                <van-col span="5" :offset="1">电话拨打</van-col>
            </van-row>
            <hr>
            <div v-for="(item,key) in listData">
                <br>
                <van-row>
                    <van-col span="4" :offset="1">{{item.contacts}}</van-col>
                    <van-col span="8" :offset="2">{{item.phone}}</van-col>
                    <van-col span="3" @click="xqclick(item)">
                        <van-button type="primary" size="mini">详情</van-button>
                    </van-col>
                    <van-col span="2" :offset="3" @click="phoneClick(item.phone)">
                        <van-icon name="phone-o"/>
                    </van-col>
                </van-row>
                <hr>
            </div>
            <br>
            <br>
            <van-row>
                <div style="margin: 15px;">
                    <van-pagination
                            @change="change"
                            v-model="currentPage"
                            :total-items="tablePage.total"
                            :show-page-size="3"
                            :items-per-page="tablePage.limit"
                            :force-ellipses="ellipses"
                    />
                </div>
            </van-row>
            <br>
        </div>

        <!--        分类选择-->
        <van-action-sheet
                v-model="showfl"
                :actions="actions"
                cancel-text="取消"
                @select="onSelect"
        />

        <!-------------添加弹框--------------->
        <van-popup v-model="show" position="top">
            <van-form @submit="onSubmit">
                <van-field
                        v-model="form.contacts"
                        name="联系人"
                        label="联系人"
                        placeholder="联系人"
                        :rules="[{ required: true, message: '请填写联系人' }]"
                />
                <van-field
                        v-model="form.phone"
                        name="电话"
                        label="电话"
                        placeholder="电话"
                        :rules="[{ required: true, message: '请填写电话号码' }]"
                />
                <van-field
                        v-model="form.qq"
                        name="QQ/微信"
                        label="QQ/微信"
                        placeholder="QQ/微信"
                        :rules="[{ required: true, message: '请填写QQ或者微信' }]"
                />
                <van-field
                        v-model="form.name"
                        name="公司名称"
                        label="公司名称"
                        placeholder="公司名称"
                        :rules="[{ required: true, message: '请填写公司名称' }]"
                />
                <van-field
                        v-model="form.job"
                        name="职务"
                        label="职务"
                        placeholder="职务"
                        :rules="[{ required: true, message: '请填写职务' }]"
                />

                <van-field
                        v-model="form.remarks"
                        name="备注"
                        label="备注"
                        placeholder="备注"
                />


                <van-field
                        readonly
                        clickable
                        name="picker"
                        :value="value"
                        label="选择器"
                        placeholder="点击选择分类"
                        @click="showPicker = true"
                        :rules="[{ required: true, message: '请选择分类' }]"
                />

                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </van-popup>
        <!-------------------------------详情弹框---------------------------------->
        <van-popup v-model="detail" position="top">
            <van-form @submit="onSubmit">
                <van-field
                        v-model="detailList.contacts"
                        name="联系人"
                        label="联系人"
                        readonly
                />
                <van-field
                        v-model="detailList.phone"
                        name="电话"
                        label="电话"
                        readonly
                />
                <van-field
                        v-model="detailList.qq"
                        name="QQ/微信"
                        label="QQ/微信"
                        readonly
                />
                <van-field
                        v-model="detailList.name"
                        name="公司名称"
                        label="公司名称"
                        readonly
                />
                <van-field
                        v-model="detailList.job"
                        name="职务"
                        label="职务"
                        readonly
                />

                <van-field
                        v-model="detailList.remarks"
                        name="备注"
                        label="备注"
                        readonly
                />

                <van-field
                        readonly
                        clickable
                        name="picker"
                        :value="detailList.catename"
                        label="分类"
                />
            </van-form>
            <hr>
            <van-row>
                <van-col :span="20" :offset="15">
                    <van-button type="warning" @click="del(detailList._id)" size="small">删除</van-button>
                </van-col>
            </van-row>
            <br>
        </van-popup>
        <!--        公用弹框-->
        <van-popup v-model="showPicker" position="bottom">
            <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
            />
        </van-popup>
    </div>
</template>
<script>
    export default {
        name: "guidelist",
        data() {
            return {
                show: false,
                detail: false,
                listData: [],
                loading: false,
                currentPage: 1,
                ellipses: true,
                detailList: [],
                //分类
                showfl: false,
                //类别数据
                actions: [{name: "所有"}, {name: "111"}, {name: "222"}],
                //类别值
                flValue: "分类选择",
                //=======form======
                form: {
                    contacts: '',
                    phone: '',
                    qq: '',
                    name: '',
                    job: '',
                    remarks: '',
                    cateid: '',
                },
                //分类添加的值
                value: '',
                //分类添加时的弹框显示
                showPicker: false,
                //分类弹框的显示
                columns: [],
                //详情分类值
                value2: '',

                //=======form======
                url: {
                    /*数据*/
                    index: '/app/wechat/Yyindex/',
                    go: '/go/address/'

                },
                // 分页
                tablePage: {
                    /*第几页*/
                    page: 1,
                    /*一页几个数据*/
                    limit: 3,
                    /*总页数*/
                    total: 0,
                    //搜索
                    soso: '',
                    //分类选择
                    typeId: ''
                },
            }
        },
        mounted() {
            this.getList();
        },

        methods: {
            onConfirm(value) {
                this.value = value;
                this.showPicker = false;
            },
            //点击类别触发
            typelb() {
                //获取分类数据
                this.showfl = true;
            },
            //选中触发
            onSelect(item) {
                this.flValue = item.name;
                this.showfl = false;
                this.tablePage.page = 1;
                this.getList(item._id);
            },
            //input 发生改变时调用
            input() {
                this.getList()
            },
            //电话
            phoneClick(phone) {
                window.location.href = "tel://" + phone;
            },
            //删除
            del(id) {
                this.axios.post(this.url.go + 'DelData', {id: id}).then(({data}) => {
                    if (data.code == 200) {
                        this.$toast("删除成功");
                        this.detail = false;
                        this.getList();

                    } else {
                        this.$toast("删除失败");
                    }
                })
            },
            getList(id) {
                if(id){
                    this.tablePage.typeId=id;
                }
                this.axios.post(this.url.go + 'GetData', this.tablePage).then(({data}) => {
                    if (data.code == 200) {
                        this.tablePage.total = data.count;
                        this.listData = data.data.data;
                        let category = data.data.cate;
                        this.actions = category;
                        let arr = [];
                        category.forEach(function (value, key) {
                            arr.push(value.name)
                        });
                        this.columns = arr;
                    } else {
                        this.$toast("显示错误");
                    }
                })
            },
            //详情页
            xqclick(item) {
                this.detailList = item;
                //查找分类数据值
                let nameData=this.actions.find(value=>value._id==item.cateid);
                if(nameData){
                    this.detailList.catename = nameData.name;
                }else{
                    this.detailList.catename="";
                }
                this.detail = true;
            },
            change(val) {
                this.tablePage.page = val;
                this.getList();
            },
            onSubmit() {
                //手机号码判断
                if (!(/^1[3456789]\d{9}$/.test(this.form.phone))) {
                    this.$toast("手机号码有误，请重填");
                } else {
                    //获取分类值
                    var v=this.actions.find(value=>value.name==this.value);
                    if(v){
                        this.form.cateid=v._id;
                    }else{
                        this.form.cateid="";
                    }

                    //执行添加
                    this.axios.post(this.url.go + 'AddData', this.form).then(({data}) => {
                        if (data.code == 200) {
                            this.show = false
                            this.$toast('添加成功');
                            this.tablePage.page = 1;
                            this.getList();
                            this.clear();
                            //重新调用获取数据
                        } else {
                            this.$toast("添加失败");
                        }
                    })
                }
            },
            clear() {
                this.form.contacts = "";
                this.form.phone = "";
                this.form.qq = "";
                this.form.name = "";
                this.form.job = "";
                this.form.remarks = "";
                this.value = "";
            },
        },
    }

</script>

<style scoped>
    #fd {
        z-index: 9999;
        position: fixed;
        width: 80%;
        height: 8%;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        /*left: 1px;*/
        margin: auto;
        left: 10%;
        right: 10%;
        bottom: 20px;
    }
</style>




